<template>
  <div>
    <!-- 标签页 -->
    <div style="margin: 0 auto 20px; width: fit-content">
      <!-- 付款标签页 -->
      <el-radio-group v-model="tabPosition" @change="groupChange">
        <el-radio-button
          v-for="(item, index) of settleHead"
          :key="index"
          :label="item"
        >
          {{ item }}
        </el-radio-button>
      </el-radio-group>
    </div>
    <!-- 付款方式 -->
    <div style="text-align: center">
      <div>
        <div style="font-size: 22px">应收金额：￥ {{ receivePayment }}</div>
      </div>
      <!-- 扫码收款 -->
      <div v-show="tabPosition == '扫码收款'" style="text-align: center">
        <div class="flex_center" style="padding: 50px">
          <div>
            <img
              class="img_cls"
              src="@/assets/public/scan-code.jpg"
              style="border-radius: 50%"
            />
            <div style="margin-top: 10px; color: rgba(0, 0, 0, 0.5)">
              使用扫码枪扫描客户付款码
            </div>
            <el-input
              ref="mark"
              v-model="scanCode"
              show-password
              style="width: 270px"
              true
              @blur="$refs.mark.focus()"
              @keyup.enter.native="handleClick"
            />
          </div>
        </div>
      </div>
      <!-- POS机收款 -->
      <div v-show="tabPosition == 'POS机收款'" style="margin: auto">
        <div class="flex_center" style="padding: 20px">
          <div>
            <div v-html="srcPos"></div>
          </div>
        </div>
        <el-input disabled style="width: 35%" :value="receivePayment">
          <template slot="append">元</template>
        </el-input>
      </div>
    </div>
  </div>
</template>

<script>
  import { paymentDa, getQrCode } from '@/api/public'
  import { getOrderStatus } from '@/api/order'

  export default {
    props: {
      receivePayment: {
        type: String,
        default: '',
      },
      oPrepaidSn: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        settleHead: ['POS机收款', '扫码收款'],
        tabPosition: 'POS机收款',
        scanCode: '', // 存放付款码条码
        srcPos: '', // 存放二维码图片路径
        orderClear: '', // 定时器id
      }
    },
    watch: {
      tabPosition: {
        immediate: true,
        handler(newValue) {
          newValue == '扫码收款' ? this.$refs['mark'].focus() : this.getCode()
        },
      },
    },
    // 当页面关闭前，执行关闭定时器
    beforeDestroy() {
      clearInterval(this.orderClear)
    },
    methods: {
      // 根据用户选择的不同付款方式，执行聚焦，获取二维码图片操作
      groupChange(e) {
        if (e == '扫码收款') {
          this.$refs['mark'].focus()
        } else if (e == 'POS机收款') {
          if (this.srcPos == '') {
            this.getCode()
          }
        }
      },
      // 扫码支付
      handleClick() {
        const data = {
          mode: 'pay_scan',
          authcode: this.scanCode, // 付款码
          order_sn: this.oPrepaidSn, // 订单号
        }
        paymentDa(data).then(() => {
          this.scanCode = '' // 清空条码变量
        })
        this.queryStatus()
      },
      // 获取pos机付款二维码
      getCode() {
        if (this.srcPos == '') {
          const params = {
            order_sn: this.oPrepaidSn,
          }
          // 获取二维码图片路径
          getQrCode(params).then((res) => {
            this.srcPos = res
            this.queryStatus()
          })
        }
      },
      // 查询当前订单状态
      queryStatus() {
        // 开启定时器
        this.orderClear = setInterval(() => {
          const params = {
            order_sn: this.orderSn,
          }
          getOrderStatus(params)
            .then((res) => {
              this.$message.success(res.message)
              clearInterval(this.orderClear)
              this.$emit('send')
            })
            .catch((err) => {
              switch (err.code) {
                case '4001':
                  break
                case '4002':
                  this.$message.error(err.message)
                  clearInterval(this.orderClear)
                  break
                case '4003':
                  this.$message.error(err.message)
                  clearInterval(this.orderClear)
                  break
              }
            })
        }, 3000)
      },
    },
  }
</script>

<style scoped>
  .img_cls {
    width: 150px;
    height: 150px;
  }
  .flex_center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .flex_between {
    display: flex;
    justify-content: space-between;
  }
</style>
